<div class="box featured-box">
  <div class="box-content">
    <ul id="myRoundabout">
      <?php foreach ($products as $product) { ?>
      	<li>
      		<div class="prod_holder">
      			<?php if ($product['thumb']) { ?>
		        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
		        <?php } ?>
		        <h3><?php echo $product['name']; ?></h3>
      		</div>
	        <?php if ($product['price']) { ?>
	        <span class="pricetag">
	          <?php if (!$product['special']) { ?>
	          <?php echo $product['price']; ?>
	          <?php } else { ?>
	          <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
	          <?php } ?>
	        </span>
	        <?php } ?>
	        <?php if ($product['rating']) { ?>
	        <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
	        <?php } ?>
      	</li>
      <?php } ?>
    </ul>
    <a class="previous_round" href="#">Previous</a>
	<a class="next_round" href="#">Next</a>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	var interval;
	$('ul#myRoundabout').roundabout({
		'btnNext': '.next_round',
		'btnPrev': '.previous_round'
	})
	.hover(function() {
		clearInterval(interval);
	}, function() {
		interval = startAutoPlay();
	});
	interval = startAutoPlay();
});

function startAutoPlay() {
	return setInterval(function() {
		$('ul#myRoundabout').roundabout_animateToPreviousChild();
	}, 3000);
}
</script>
